<template>
  <div class="header">
    <!-- 头部左侧Logo和标题 -->
    <img class="logo" src="/favicon.ico" />
    <span class="company">XX会员管理系统</span>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="changePsw">
          <i class="el-icon-edit"></i>
          修改密码
        </el-dropdown-item>
        <el-dropdown-item command="quit">
          <p>
            <i class="el-icon-coordinate"></i>
            退出
          </p></el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 密码弹窗  -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      center
      width="33.5%"
      :modal="false"
    >
      <el-form
        :model="pswForm"
        status-icon
        :rules="rules"
        ref="pswForm"
        label-width="80px"
      >
        <el-form-item label="原密码" prop="olddPassword">
          <el-input v-model="pswForm.oldPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="pswForm.newPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input
            v-model="pswForm.checkPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePsw('pswForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { logOut } from "@/utils/auth.js";
export default {
  data() {
    // 新密码
    var validatePsw = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.pswForm.checkPassword !== "") {
          // 触发验证checkPassword验证规则；
          this.$refs.pswForm.validateField("checkPassword");
        }
        callback();
      }
    };
    // 确认新密码
    var validateCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再输入密码"));
      } else if (value !== this.pswForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 修改弹窗是否出现
      dialogFormVisible: false,
      // 密码表单数据
      pswForm: {
        oldPassword: "",
        newPassword: "",
        checkPassword: ""
      },
      // 密码表单验证规则
      rules: {
        olddPassword: [{ message: "请输入密码", trigger: "blur" }],
        newPassword: [{ validator: validatePsw, trigger: "blur" }],
        checkPassword: [{ validator: validateCheck, trigger: "blur" }]
      }
    };
  },

  components: {},

  methods: {
    // 功能：修改密码
    changePsw(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 检验通过发送请求
          // console.log("发送请求");
          this.dialogFormVisible = false;
        } else {
          // console.log("校验错误");
        }
      });
    },
    // 下拉菜单事件
    handleCommand(command) {
      if (command == "changePsw") {
        // 修改密码对话框弹出
        this.dialogFormVisible = true;
      } else if (command == "quit") {
        logOut(); // 退出登录
        this.$router.push("/login"); //跳转至登录页
        // ，提示消息
        this.$message({
          showClose: true,
          message: "退出成功",
          type: "success",
          duration: 2000
        });
      }
    }
  }
};
</script>

<style scoped lang='scss'>
/* 头部区域 */
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 40px;
  line-height: 40px;
  background-color: #2d3a4b;
  z-index: 10;
  .logo {
    width: 25px;
    vertical-align: middle;
    padding: 0 15px;
  }
  .company {
    color: white;
  }
  //  下拉菜单
  .el-dropdown {
    float: right;
    padding-right: 20px;
    color: #fff;
    .el-dropdown-link {
      cursor: pointer;
    }
  }
}
</style>